<template>
	<view class="page-container">
		<view class="top">
			<text class="city">沈阳 ▼</text>
			<input type="text" placeholder="搜索驾校" />
			<image src='../../static/8977.png' mode="" class="youtu"></image>
		</view>
		<view class="banner">
			<swiper :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,i) in banners" :key="i">
					<image :src="item.path"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav">
			<view class="sixiao">
				<image src="../../static/cac42458b06722100030676b188707d_07.png"></image>
				<view class="wenzi">
					驾校排行
				</view>
			</view>
			<view class="sixiao">
				<image src="../../static/cac42458b06722100030676b188707d_09.png"></image>
				<view class="wenzi">
					教练排行
				</view>
			</view>
			<view class="sixiao">
				<image src="../../static/cac42458b06722100030676b188707d_12.png"></image>
				<view class="wenzi">
					查学车价
				</view>
			</view>
			<view class="sixiao">
				<image src="../../static/cac42458b06722100030676b188707d_14.png"></image>
				<view class="wenzi">
					我的需求
				</view>
			</view>
			<view class="sixiao">
				<image src="../../static/cac42458b06722100030676b188707d_16.png"></image>
				<view class="wenzi">
					地图学车
				</view>
			</view>
		</view>
		<view class="ertu">
			<image src="../../static/cac42458b06722100030676b188707d_23.png" mode=""></image>
			<image src="../../static/cac42458b06722100030676b188707d_25.png"></image>
		</view>
		<view class="dianlian">
			<view class="jianbian">

			</view>
			<view class="wenben">
				<image class="dingweitu" src="../../static/54897651578978416541_03.png" mode=""></image>
				<image class="jiaxiao" src="../../static/be3891275b39b2f93c58e536be95bcc_03.png" </image>
					<view class="wenzi">
						<view class="shang">
							宏安驾校
						</view>
						<view class="xia">
							3280元起距离3.6km
						</view>
					</view>
					<image class="dianhua" src="../../static/cac42458b06722100030676b188707d_29.png" mode=""></image>
			</view>
		</view>
		<view class="datu">
			<image src="../../static/cac42458b06722100030676b188707d_25.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import API from "../../api/index.js"
	export default {
		data() {
			return {
				id: '',
				banners: [],
			}
		},

		onLoad() {
			this.getBanners()
		},
		methods: {
			async getBanners() {
				let res = await API['list']('kaoshi1')
				console.log(res, '轮播图')
				this.banners = res.data.data
			}
		}
	}
</script>

<style>
	.page-container {
		/* width: 100%; */
		padding: 0 20px 0 20px;
	}

	.top {
		width: 100%;
		display: flex;
		/* justify-content: space-between */
	}

	.top .city {
		width: 4rem;
		height: 2rem;
		margin-top: 0.4rem;
	}

	.top input {
		border: 1px solid #ccc;
		border-radius: 20px;
		/* background-color: #ccc; */
		/* margin-left: 25px; */
		width: 20rem;
		height: 2rem;
		text-indent: 2em;
		background-image: url('../../static/4809795a177f03d28419621e7616ad2.png');
		background-size: 8%;
		background-repeat: no-repeat;
		background-position: 2%;
	}

	.youtu {
		height: 1.5rem;
		width: 2rem;
		margin-top: 0.4rem;
	}

	.banner {
		width: 100%;
		height: 7rem;
		background-color: aqua;
	}

	.nav {
		display: flex;
		justify-content: space-around;
	}

	.sixiao {
		margin-top: 1rem;
		text-align: center;
	}

	.sixiao image {
		width: 2.5rem;
		height: 2.5rem;
		margin-bottom: 1rem;
	}

	.ertu {
		display: flex;
		justify-content: space-between;
		margin-top: 2rem;
	}

	.ertu image {
		height: 4rem;
		width: 12rem;
	}

	.dianlian {}

	.jianbian {
		height: 1rem;
		width: 100%;
		background: linear-gradient(to bottom, #0ff, #fff);
	}

	.wenben {
		display: flex;
		position: relative;
	}

	.dingweitu {
		position: absolute;
		left: 0;
		top: 0;
		height: 1rem;
		width: 2rem;
	}

	.wenben .jiaxiao {
		height: 5rem;
		width: 8rem;
	}

	.wenben .wenzi {
		margin-top: 1rem;
		margin-left: 1rem;
	}

	.wenzi .xia {
		margin-top: 1rem;
		font-size: 0.7rem;
		color: #ccc;
	}

	.wenben .dianhua {
		width: 3rem;
		height: 3rem;
		margin-top: 2rem;
		margin-left: 5rem;
	}

	.datu {
		margin-top: 1rem;
	}

	.datu image {
		width: 100%;
		height: 7rem;
	}
</style>